<template>
  <div class="suggest-modal">
    <el-dialog
      title="意见反馈"
      width="35%"
      :visible.sync="suggestVisible"
      :before-close="handleClose"
      :modal="isModal"
      :close-on-click-modal="isModal"
      center>
      <div>
        <el-input v-model="comments.context" type="textarea" class="suggest-area" :rows="4" resize="none" placeholder="告诉我你的建议或者遇见的问题"></el-input>
        <div class="suggest-img" v-if="comments.openSuggestImg" style="margin-top: 30px;">
          <p style="margin-bottom: 30px;">屏幕截图:</p>
          <img :src="comments.imgUri"/>
        </div>
        <p style="margin-top: 30px;">
          <el-switch
            v-model="comments.openSuggestImg"
            active-color="#3a8ee6"
            inactive-color="#dcdfe6"
            active-text="提交截图"
            inactive-text="不提交截图">
          </el-switch>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submits" class="submitBtn">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const baseImg = require('../../assets/bg.png')
export default {
  name: "suggest-modal",
  props: {
    suggestVisible: {
      type: Boolean,
      default: false
    }
  },
  data (){
    return {
      isModal: false,
      comments: {
        context: '',
        openSuggestImg: false,
        imgUri: baseImg
      }
    }
  },
  methods: {
    handleClose() {
      this.$confirm('确认关闭反馈？')
        .then(_ => {
          this.$emit('_cancelsModal', false)
        })
        .catch(_ => {});
    },
    submits () {
      this.$emit('_submitsModal', {status: false, comment: this.comments})
    }
  }
}
</script>

<style scoped lang="less">
  .suggest-modal{
    z-index: 9999;
    .el-dialog__headerbtn{
      right: -40px!important;
    }
    .submitBtn{
      width: 25%;
    }
    .suggest-img{
      overflow: hidden;
      img{
        width: 100%;
        height: 350px;
      }
    }
  }

</style>
